Working with the Viewer > Customizing the Viewer > Customization Overview > Customization Examples > Customizing the Styles |
The Responsive Viewer uses LESS to pre-process the CSS for the viewer. In order to facilitate using this pre-processor in a development environment, the following files are included in the viewer-assets folder:
Example Copy Code npm install -g grunt-cli npm install
Point the command line interface to the viewer-assets folder in order to execute these commands.
Example Copy Code grunt buildprod
Example Copy Code grunt builddev
Example Copy Code grunt dev
The Less preprocessor will generate the following files:
The styles should be loaded in the viewer in the following order:
The viewer uses the class .pccv in order to namespace the styles it uses. In order to override any selector used in the viewer, your selector must begin with the class .pccv:
Example |
Copy Code
|
---|---|
/* Set the navigation tab bar to dark red */
.pccv .pcc-nav-tabset,
.pccv .pcc-nav-tabset .pcc-tab-item,
.pccv .pcc-status-bar { background: #5b100d; }
|
All resulting CSS files have a Less counterpart in the root of the less folder. These are the only files that can be build on their own. File names beginning with an underscore ( _ ) are partial style files, and are included as modules in the root files. These individual components are split out into the following structure:
There are many variables contained in less/base/_variables.less, which control things like the image resources, color scheme, and toolbar sizing. These variables can be modified in order to propagate changes throughout the viewer.
A number of icons are used throughout the viewer for different UI elements. These icons are stored in the icons*.png files. The icons sprite image has a dark version for use on light backgrounds and a white version for use on dark backgrounds. There is a larger @2x version, to account for HD/Retina displays, and a regular sized version for legacy support. Since modern browsers support the background-size property, we use the @2x images for all icons and degrade to the regular sized icons for Internet Explorer 8.
The viewer utilizes CSS3 Media Queries with expressions using min-width and max-width to adjust the layout of navigation and dialogs. The Media Query Breakpoints are set according to the viewer layout. On smaller viewports the tab navigation collapses into a menu and some tools are hidden. On larger viewports the dialogs transform from horizontal to a vertical layout to utilize screen real estate.
The breakpoints are located in the less/base/_breakpoints.less file, and are used throughout the less files as detached rulesets. The breakpoints are as follows:
Example |
Copy Code
|
---|---|
/* Target modern browsers that support media queries */ .modernView(@rules) { @media (min-width: 0) { @rules(); } } /* Mobile & Tablet Sizes, collapse navigation tabs into menu */ .mobileView(@rules) { @media (max-width: 767px) { @rules(); } } /* Desktop Sizes */ .desktopView(@rules) { @media (min-width: 768px) { @rules(); } } |
The viewer uses a basic grid system to assist with the UI layout. Through a series of rows and columns the layout can scale dynamically. Rows are used to create horizontal groups of columns. Columns are created by defining the number of twelve columns you will span. For example, three columns would use three divs with a class of .pcc-col-4:
Example |
Copy Code
|
---|---|
<div class="pcc-row"> <div class="pcc-col-4">Left</div> <div class="pcc-col-4">Center</div> <div class="pcc-col-4">Right</div> </div> |
The legacy CSS necessary for IE8 is held in the less/legacy.less file. Here we address unsupported or troublesome CSS features like drop shadows, opacity or background alpha transparency. In addition, because Media Queries are not supported in Internet Explorer 8 and no Media Query polyfills are used in this regard, we add additional styles here that are accounted for in Media Queries in modern browsers.
This file contains the styles required for using ViewerControl directly. This file should not be changed directly, but rather, should have any necessary rules overridden by your own CSS. If choosing not to use our viewer, and instead embedding ViewerControl directly in a custom integration, this CSS file is still required.
There are a few polyfills used to provide support for modern browser features: